import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import { Form, Input, Button } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import store from 'store'
import { createUserInfo } from '../../redux/actions/userInfo'

// 引入 redux
import reduxStore from '@/redux/store'

// 引入静态资源
import Logo from '../../assets/images/logo.png'
import './index.less'

// 引入 api
import { reqlogin } from '../../api/login'

export default class Login extends Component {
  myForm = React.createRef()

  onSubmit = (params) => {
    reqlogin(params).then((res) => {
      console.log('res-->', res)
      store.set('user', res)
      reduxStore.dispatch(createUserInfo(res))
      this.props.history.replace('/')
    })
  }

  onFinish = (value) => {
    // console.log('onFinish-->', value)
    // console.log('myForm-->', this.myForm)
    this.myForm.current
      .validateFields()
      .then(values => {
        // console.log('values-->', values)
        // console.log('getFieldsValue-->', this.myForm.current.getFieldsValue())
        // this.props.history.push('/')
        this.onSubmit(values)
      })
      .catch((errorInfo) => {
        console.log('errorInfo-->', errorInfo)
      })
  }

  // onFinishFailed = (value) => {
  //   console.log('onFinishFailed-->', value)
  // }

  // onFieldsChange = (changedFields, allFields) => {
  //   console.log('onFieldsChange-->changedFields', changedFields)
  //   console.log('onFieldsChange-->allFields', allFields)
  // }

  // onValuesChange = (changedValues, allValues) => {
  //   console.log('onValuesChange-->changedValues', changedValues)
  //   console.log('onValuesChange-->allValues', allValues)
  // }

  render() {
    const { id } = store.get('user') || {}
    if (id) {
      return <Redirect to="/" />
    } else {
      return (
        <div className="login">
          <header className="login-header">
            <img src={Logo} alt="login" />
            <h2>我是 Login 头部标题</h2>
          </header>
          <div className="login-content">
            <h2>用户登录</h2>
            <Form
              ref={this.myForm}
              name="basic"
              wrapperCol={{
                span: 24
              }}
              initialValues={{
                remember: true
              }}
              autoComplete="off"
              onFinish={this.onFinish}
              // onFinishFailed={this.onFinishFailed}
              // onFieldsChange={this.onFieldsChange}
              // onValuesChange={this.onValuesChange}
            >
              <Form.Item
                name="username"
                rules={[
                  {
                    required: true,
                    message: '请输入用户名！'
                  }
                ]}
              >
                <Input prefix={<UserOutlined />} placeholder="用户名" />
              </Form.Item>

              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码！'
                  },
                  {
                    min: 4,
                    message: '密码最小长度4位'
                  },
                  {
                    max: 6,
                    message: '密码最大长度6位'
                  }
                ]}
              >
                <Input.Password prefix={<LockOutlined />} placeholder="密码" />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-btn">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      )
    }
  }
}
